<template>
  <div class="WriteEditor">
    <div class="" align="center">
      <h1 style="padding-top: 150px;padding-left: 50px;text-align: center;font-family: 华文行楷;font-weight: bold">投稿
      </h1>
      <el-form
          :model="writerArticleForm"
          :rules="loginRules"
          ref="writerArticleForm"
          label-width="60px"
          label-position="right"
          style="padding-left: 400px"
      >
        <el-form-item label="标题:" prop="title" style="margin-top: 10px;margin-left: 20px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="title"
                  type="text"
                  placeholder="请输入标题"
                  v-model="writerArticleForm.title"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="类别:" prop="tagName" style="margin-top: 10px;margin-left: 20px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-lock"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="tagName"
                  type="text"
                  placeholder="请输入类别"
                  v-model="writerArticleForm.tagName"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="简介:" prop="summary" style="margin-top: 10px;margin-left: 8px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-lock"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="summary"
                  type="textarea"
                  placeholder="请输入简介"
                  v-model="writerArticleForm.summary"
                  style="height: 50px;width: 300px"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <!--文件上传-->
        <div>
          <el-form-item label="文件名:" prop="coverImage" style="margin-top: 10px;margin-left: 8px">
            <el-row>
              <el-col :span="2">
                <span class="el-icon-lock"></span>
              </el-col>
              <el-col :span="22">
                <el-input
                    class="inps"
                    name="coverImage"
                    type="text"
                    placeholder="文件名"
                    v-model="writerArticleForm.coverImage"
                    disabled
                ></el-input>
              </el-col>
              <el-col>
                <el-upload
                    action="http://localhost:8888/files/upload"
                    :on-success="fileUploadSuccess"
                >
                  <el-button type="primary" style="color: black">点击上传</el-button>
                  <template #tip>
                    <div class="el-upload__tip">
                      jpg/png files with a size less than 500kb
                    </div>
                  </template>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
        </div>

        <el-form-item label="内容:" prop="articleBody" style="margin-top: 10px;margin-left:8px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="articleBody"
                  type="textarea"
                  :autosize="{ minRows: 8, maxRows: 8 }"
                  placeholder="请输入投稿内容"
                  v-model="writerArticleForm.articleBody"
                  style="width: 500px;height: 150px"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="margin-top: 55px">
          <el-button type="primary" round class="submitBtn" @click="submitArticle" color="black"
          ><h3>发表</h3>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import router from "@/router";

export default {
  name: "WriteEditor",
  components:{

  },

  created() {
    this.load()
  },

  methods:{
    load(){
      let user=sessionStorage.getItem("User")
      this.userId=JSON.parse(user).userId
    },

    submitArticle(){
      console.log(this.userId+"/"+this.writerArticleForm.createDate+"/"+this.writerArticleForm.summary+"/"+this.writerArticleForm.title+"/"+this.writerArticleForm.coverImage+"/"+this.writerArticleForm.articleBody+"/"+this.writerArticleForm.tagName)
      request.post("/articles/writeArticle/"+this.userId+"/"+this.writerArticleForm.createDate.toString()+"/"+this.writerArticleForm.summary+"/"+this.writerArticleForm.title+"/"+this.writerArticleForm.coverImage+"/"+this.writerArticleForm.articleBody+"/"+this.writerArticleForm.tagName).then(res => {
        console.log(res.data)
        if (res.data == 500) {
          alert("用户id返回错误,返回推荐文章页面!")
          router.push("/CommentView")
        } else {
          alert("发布成功,返回最新文章")
          router.push("/NowView")
        }
      })
    },

    fileUploadSuccess(res){
      console.log(res.data)
      this.writerArticleForm.coverImage=res.data.toString()
    }
  },

  data(){
    return{
      writerArticleForm:{
        title:'',
        summary:'',
        tagName:'',
        coverImage:'',
        articleBody:'',
        userId: '',
        createDate: new Date().getFullYear()+"-"+(new Date().getMonth()+1).toString().padStart(2,'0')+"-"+new Date().getDate().toString().padStart(2,'0')+" "+new Date().getHours().toString().padStart(2,'0')+":"+new Date().getMinutes().toString().padStart(2,'0')+":"+new Date().getSeconds().toString().padStart(2,'0'),
      },

    }
  }
}
</script>

<style>
.WriteEditor{
  /*background-image: url("~@/assets/images/04.jpg");*/

  margin:0px;
  background-size:100% 100%;

  background-attachment:fixed;

  width: 1270px;
  height: 750px;
}
</style>